import React from 'react';
import { Form, Input, Select, Button, DatePicker } from 'antd';
import { storyOptions } from '@/utils/data';
import { useRouter } from 'next/router';
import dayjs from 'dayjs';
import Icon from '@/components/layout/Icon';

const layout = {
  labelCol: { flex: '70px' },
  wrapperCol: { flex: '200px' },
};

const StorySearch = (props: any) => {
  const { handleFinish, handleReset } = props;
  const [form] = Form.useForm();
  const router = useRouter();

  const onSearch = (values) => {
    const obj = { ...values };
    obj.online_time = obj.online_time ? dayjs(values.online_time).format('YYYY-MM-DD') : undefined;
    handleFinish(obj);
  };

  const onReset = () => {
    form.resetFields();
    handleReset();
  };

  const onCreate = () => {
    router.push('/storyManage/edit/0');
  };

  return (
    <div className="story-search" style={{ marginBottom: '10px', marginTop: '0px' }}>
      <Form form={form} onFinish={onSearch} layout="inline" colon={false}>
        <Form.Item name="name" label="需求名称" {...layout} style={{ marginBottom: '10px' }}>
          <Input placeholder="请输入需求名称" allowClear style={{ width: '200px' }} />
        </Form.Item>
        <Form.Item name="status" label="需求状态" {...layout} style={{ marginBottom: '10px' }}>
          <Select
            options={storyOptions}
            placeholder="请选择状态"
            allowClear
            style={{ width: '200px' }}
            showSearch
            filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
          />
        </Form.Item>
        <Form.Item name="online_time" label="上线时间" {...layout} style={{ marginBottom: '10px' }}>
          <DatePicker placeholder="请选择" allowClear style={{ width: '200px' }} suffixIcon={<Icon src="/images/date.png" width={16} height={16} />} />
        </Form.Item>
        <Form.Item>
          <Button onClick={onReset} style={{ marginRight: '10px' }}>
            重 置
          </Button>
          <Button
            type="primary"
            style={{ marginRight: '44px' }}
            htmlType="submit"
            icon={<Icon src="/images/search.png" width={16} height={16} style={{ marginRight: '4px', marginTop: '2px', verticalAlign: 'text-top' }} />}
          >
            查 询
          </Button>
        </Form.Item>
        <Form.Item style={{ flex: '1', display: 'flex', justifyContent: 'flex-end', marginRight: '0' }}>
          <Button onClick={onCreate} type="primary" icon={<Icon src="/images/add.png" width={16} height={16} style={{ marginRight: '4px', marginTop: '2px', verticalAlign: 'text-top' }} />}>
            自创建需求
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default StorySearch;
